<template>
  <view class="container">
    <!-- 头部登录提示 -->
    <view class="login-header">
      <text class="login-text">立即登录</text>
      <text class="sub-text">登录后享受多物业服务</text>
    </view>

    <!-- 开门码区域 -->
    <view class="qrcode-section">
      <text class="section-title">开门码</text>
      <view class="qrcode-box"></view>
    </view>

    <!-- 常用服务网格 -->
    <view class="service-grid">
      <view class="grid-item">
        <image src="/static/icons/pay.png" class="icon"></image>
        <text>生活缴费</text>
        <text class="sub">在线缴纳物业费</text>
      </view>
      <view class="grid-item">
        <image src="/static/icons/repair.png" class="icon"></image>
        <text>报修报事</text>
        <text class="sub">维修一触即发</text>
      </view>
    </view>

    <!-- 联系管家 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">联系管家</text>
        <text class="section-sub">一键联系及时响应</text>
      </view>
    </view>

    <!-- 功能列表 -->
    <view class="function-list">
      <view class="list-item">
        <image src="/static/icons/phone.png" class="icon"></image>
        <text>常用电话</text>
        <text class="sub">随时查找服务电话</text>
      </view>
      <view class="list-item">
        <image src="/static/icons/borrow.png" class="icon"></image>
        <text>物品借用</text>
        <text class="sub">缺工具立即借</text>
      </view>
      <view class="list-item">
        <image src="/static/icons/visitor.png" class="icon"></image>
        <text>访客通行</text>
        <text class="sub">访客邀约一触即发</text>
      </view>
    </view>

    <!-- 底部导航 -->
    <view class="tab-bar">
      <view class="tab-item active">首页</view>
      <view class="tab-item">公告</view>
      <view class="tab-item">我的</view>
    </view>
  </view>
</template>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.login-header {
  padding: 40rpx;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.login-text {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.sub-text {
  color: #888;
  font-size: 24rpx;
}

.qrcode-section {
  background: #fff;
  padding: 30rpx;
  margin: 20rpx 0;
  border-radius: 16rpx;
}

.qrcode-box {
  height: 300rpx;
  background: #eee;
  margin-top: 20rpx;
  border-radius: 8rpx;
}

.service-grid {
  display: flex;
  justify-content: space-between;
  margin: 20rpx 0;
}

.grid-item {
  flex: 1;
  background: #fff;
  padding: 30rpx;
  margin: 0 10rpx;
  border-radius: 16rpx;
  text-align: center;
}

.icon {
  width: 80rpx;
  height: 80rpx;
  display: block;
  margin: 0 auto 20rpx;
}

.sub {
  display: block;
  color: #666;
  font-size: 24rpx;
  margin-top: 10rpx;
}

.function-list {
  background: #fff;
  border-radius: 16rpx;
  padding: 0 30rpx;
}

.list-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
  display: flex;
  align-items: center;
}

.list-item:last-child {
  border-bottom: none;
}

.tab-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  display: flex;
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
}

.tab-item {
  flex: 1;
  text-align: center;
  line-height: 100rpx;
  color: #666;
}

.tab-item.active {
  color: #007AFF;
  font-weight: bold;
}
</style>